<template>
    <div>
        <el-container>
            <el-header>
                <el-form>
                    <el-form-item>
                        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                        <el-button size="small" @click="downloadEmployee">导出</el-button>
                    </el-form-item>
                </el-form>
            </el-header>

            <!-- 主体表格 -->
            <el-main>
                <el-table :data="tableData" style="width: 100%">

                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄">
                    </el-table-column>
                    <el-table-column prop="address" label="住址">
                    </el-table-column>
                    <el-table-column prop="post" label="面试岗位">
                    </el-table-column>
                    <el-table-column prop="time" label="面试时间">
                    </el-table-column>
                    <el-table-column prop="description" label="描述">
                    </el-table-column>
                    <el-table-column prop="suggestsalary" label="建议薪资">
                    </el-table-column>

                    <el-table-column prop="state" label="审批状态">
                        <template slot-scope="scope">
                            <el-tag :type="getTagType(scope.row.state)">
                                <span>{{ getStateText(scope.row.state) }}</span>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.state == '0'" type="text" @click="handleEdit(scope.row)"
                                size="small">修改</el-button>
                            <el-button v-if="scope.row.state != '0'" type="text" @click="handleEdit(scope.row)"
                                size="small">查看</el-button>
                            <el-button type="text" size="small" @click="handleDelete(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer style="text-align: center;margin-top: 20px;">
                <!-- 分页 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-footer>


            <!-- 新增弹窗 -->
            <el-dialog title="新增" :visible.sync="addEmployeeFormFormVisible" width="40%">
                <el-form :model="addEmployeeFormForm" ref="employeeRulesForm" :rules="unitMeasureRules">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addEmployeeFormForm.name" autocomplete="off" style="width:300px"></el-input>
                    </el-form-item>

                    <el-form-item label="性别" prop="sex">
                        <el-select v-model="addEmployeeFormForm.sex" placeholder="请选择性别" style="width: 300px;">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input-number v-model="addEmployeeFormForm.age" controls-position="right"
                            @change="handleChange" :min="1" :max="120"></el-input-number>
                    </el-form-item>
                    <el-form-item label="住址" prop="address">
                        <el-input v-model="addEmployeeFormForm.address" autocomplete="off"
                            style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="面试岗位" prop="post">
                        <el-select v-model="addEmployeeFormForm.post" placeholder="请选择面试岗位" style="width: 300px;">
                            <el-option label="开发部" value="开发部"></el-option>
                            <el-option label="研发部" value="研发部"></el-option>
                            <el-option label="测试部" value="测试部"></el-option>
                            <el-option label="运维部" value="运维部"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="面试日期" prop="time">
                        <el-date-picker v-model="addEmployeeFormForm.time" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :disabled="addEmployeeFormForm.state == '1' ? true : false" placeholder="选择日期"
                            style="width:200px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input v-model="addEmployeeFormForm.description" autocomplete="off"
                            style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="建议薪资" prop="suggestsalary">
                        <el-input-number v-model="addEmployeeFormForm.suggestsalary" controls-position="right"
                            @change="handleChange" :min="1" :max="99999999"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addEmployeeFormFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="commitEmployeeForm('employeeRulesForm')">确 定</el-button>
                </div>
            </el-dialog>



            <!-- 修改弹窗 -->
            <el-dialog :title="title" :visible.sync="updateEmployeeFormFormVisible" width="40%">
                <el-form :model="updateEmployeeForm" ref="employeeRulesForm" :rules="unitMeasureRules">
                    <el-col :span="11">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="updateEmployeeForm.name"
                                :disabled="updateEmployeeForm.state != '0' ? true : false" autocomplete="off"
                                style="width:200px" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="性别">
                            <el-select v-model="updateEmployeeForm.sex" style="width:200px"
                                :disabled="updateEmployeeForm.state != '0' ? true : false">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="年龄" prop="age">
                            <el-input-number v-model="updateEmployeeForm.age" style="width:200px"
                                :disabled="updateEmployeeForm.state != '0' ? true : false" controls-position="right"
                                @change="handleChange" :min="1" :max="120"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="住址" prop="address">
                            <el-input v-model="updateEmployeeForm.address" style="width:200px"
                                :disabled="updateEmployeeForm.state != '0' ? true : false" autocomplete="off"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="面试岗位" prop="post">
                            <el-input v-model="updateEmployeeForm.post" style="width:200px"
                                :disabled="updateEmployeeForm.state != '0' ? true : false" autocomplete="off"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="11">
                        <el-form-item label="面试日期" prop="time">
                            <el-date-picker v-model="updateEmployeeForm.time" type="datetime" style="width:200px"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :disabled="updateEmployeeForm.state != '0' ? true : false"
                                placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="22">
                        <el-form-item label="描述" prop="description">
                            <el-input v-model="updateEmployeeForm.description" style="width:500px" type="textarea"
                                :disabled="updateEmployeeForm.state != '0' ? true : false"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="22">
                        <el-form-item label="建议薪资" prop="suggestsalary">
                            <el-input-number v-model="updateEmployeeForm.suggestsalary" style="width:200px"
                                :disabled="updateEmployeeForm.state != '0' ? true : false" controls-position="right"
                                @change="handleChange" :min="1" :max="99999999"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="领导意见">
                            <el-input v-model="updateEmployeeForm.opinion" style="width:500px" type="textarea"
                                :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="22">
                        <el-form-item label="薪资">
                            <el-input-number v-model="updateEmployeeForm.salary"
                                :disabled="true" controls-position="right"
                                @change="handleChange" :max="99999999"></el-input-number>
                        </el-form-item>
                    </el-col>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateEmployeeFormFormVisible = false" size="small">关闭</el-button>
                    <el-button type="primary" @click="commitUpdateEmployeeForm('employeeRulesForm')" size="small"
                        :disabled="updateEmployeeForm.state != '0' ? true : false">
                        保存
                    </el-button>
                    <el-button type="primary" @click="commitState" size="small"
                        :disabled="updateEmployeeForm.state != '0' ? true : false">
                        提交
                    </el-button>
                </div>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
import { getEmployeeList, addEmployee, getEmployeeById, updateSaveEmployee, delEmployeeById, updateSateEmployee } from "@/api/employee"
import { title } from "@/settings"
export default {
    data() {
        return {
            updateEmployeeFormFormVisible: false,
            updateEmployeeForm: {},
            addEmployeeFormFormVisible: false,
            addEmployeeFormForm: {},
            unitMeasureRules: {
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '性别不能为空', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '年龄不能为空', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '住址不能为空', trigger: 'blur' }
                ],
                post: [
                    { required: true, message: '面试岗位不能为空', trigger: 'blur' }
                ],
                time: [
                    { required: true, message: '面试日期不能为空', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '描述不能为空', trigger: 'blur' }
                ],
                suggestsalary: [
                    { required: true, message: '建议薪资不能为空', trigger: 'blur' }
                ],
            },

            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            title: '修改'

        }
    },
    methods: {
        handleDelete(row) {
            this.$confirm('确认删除该条记录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delEmployeeById(row.id).then(res => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.getTableData(this.currentPage, this.pageSize)
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    message: '已取消删除',
                    type: 'info'
                })
            })
        },
        handleView(row) {
            this.updateEmployeeForm = row;
            this.updateEmployeeFormFormVisible = true;

        },
        commitState() {

            const params = {
                id: this.updateEmployeeForm.id,
                state: this.updateEmployeeForm.state
            };
            updateSateEmployee(params).then(res => {
                this.$message({
                    message: '提交成功',
                    type: 'success'
                });
                const index = this.tableData.findIndex(item => item.id === this.updateEmployeeForm.id);
                if (index !== -1) {
                    this.$set(this.tableData[index], 'isSubmitted', true);
                }
                this.updateEmployeeFormFormVisible = false;
                this.getTableData(this.currentPage, this.pageSize);
            }).catch(err => {
                this.updateEmployeeFormFormVisible = false;
                console.log(err);
            });
        },
        commitUpdateEmployeeForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateSaveEmployee(this.updateEmployeeForm).then(res => {
                        this.$message({
                            message: '修改成功' + res.data + '条数据',
                            type: 'success'
                        })
                        this.updateEmployeeFormFormVisible = false
                        this.getTableData(this.currentPage, this.pageSize)
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        handleEdit(row) {
            if (row.state == '0') {
                this.title = '修改'
            } else {
                this.title = '详情'
            }
            getEmployeeById(row.id).then(res => {
                this.updateEmployeeForm = res.data;
                this.updateEmployeeFormFormVisible = true;

            }).catch(err => {
                console.log(err);
            });
        },
        handleChange(val) {
            this.updateEmployeeForm.age = val
        },
        // 根据状态值返回对应的标签颜色
        getTagType(state) {
            switch (state) {
                case '0': // 人事审批
                    return 'info';  // 可以根据需求选择合适的颜色
                case '1': // 展会领导审批
                    return 'warning';
                case '2': // 通过
                    return 'success';
                case '3': // 未通过
                    return 'danger';
                default:
                    return '';
            }
        },
        // 根据状态值返回对应的文本
        getStateText(state) {
            switch (state) {
                case '0':
                    return '人事审批';
                case '1':
                    return '领导审批';
                case '2':
                    return '通过';
                case '3':
                    return '未通过';
                default:
                    return '';
            }
        },

        // 新增
        handleAdd() {
            this.addEmployeeFormFormVisible = true
            this.addEmployeeFormForm = {}

        },
        commitEmployeeForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addEmployee(this.addEmployeeFormForm).then(res => {
                        this.$message({
                            message: '新增' + res.data + '条数据',
                            type: 'success'
                        })
                        this.addEmployeeFormFormVisible = false
                        this.getTableData(this.currentPage, this.pageSize)
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        downloadEmployee() {
            window.location.href = "/employee/download/excel"
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getTableData(this.currentPage, val)
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getTableData(val, this.pageSize)
        },
        getTableData(page, size) {
            const params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize
            }
            getEmployeeList(params).then(res => {
                this.tableData = res.data.dataList
                this.total = res.data.total
            }).catch(err => {
                console.log(err)
            })

        },

    },
    created() {
        this.getTableData(this.currentPage, this.pageSize)
    }

}
</script>

<style lang="scss" scoped></style>